<template>
  <div>
    <el-dialog
      :model-value="dialogAsync"
      width="30%"
      :close-on-click-modal="false"
      :center="true"
      @open="openDialog"
      @close="closeDialog"
    >
      <template #header>
        <div>
          <span class="dialog-title">数据库恢复</span>
          <span class="dialog-title-desc">注意：慎重选择，恢复数据会重启程序</span>
        </div>
      </template>
      <div class="config-body">
        <el-form ref="form" label-width="auto">
          <el-form-item label="选择数据库">
            <el-radio-group v-model="dbName">
              <el-radio v-for="(item, index) in dbList" :key="index" :value="item.name">
                {{ item.name }}
              </el-radio>
            </el-radio-group>
          </el-form-item>
        </el-form>
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button type="primary" @click="emits('recovery', dbName)">确定</el-button>
          <el-button @click="closeDialog">取消</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive } from "vue";
const props = defineProps({
  dialogAsync: {
    type: Boolean,
    default: false,
  },
  name: {
    type: String,
    default: "",
  },
  dbList: {
    type: Array,
    default: [],
  },
});
const dbName = ref("");
const openDialog = () => {
  dbName.value = props.name;
};
const emits = defineEmits(["closeDialog", "recovery"]);
const closeDialog = () => {
  emits("closeDialog", false);
};
</script>

<style lang="scss" scoped>
.dialog-title-desc {
  font-size: 12px;
  color: #8b8888;
  margin-left: 10px;
}

:deep(.el-form-item__content),
:deep(.el-radio-group) {
  flex-direction: column;
  align-items: flex-start;
}
</style>
